import classNames from 'classnames';

import type { LogoVariant } from '#ui/types';
import type { FC, SVGProps } from 'react';

export type NodeJsLogoProps = SVGProps<SVGSVGElement> & {
  variant?: LogoVariant;
};

const NodejsIcon: FC<NodeJsLogoProps> = ({
  className,
  variant = 'default',
  ...props
}) => {
  return (
    <svg
      width={267}
      height={80}
      viewBox="0 0 267 80"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={classNames('fill-[#333333] dark:fill-white', className)}
      {...props}
    >
      <mask
        id="a"
        maskUnits="userSpaceOnUse"
        x={0}
        y={0}
        width={267}
        height={80}
        style={{
          maskType: 'luminance',
        }}
      >
        <path d="M267 0H0v79.378h267z" fill="#fff" />
      </mask>
      <g mask="url(#a)">
        <path
          d="M234.983 78.755a4 4 0 0 1-1.933-.51l-6.121-3.658c-.921-.51-.46-.695-.184-.787 1.242-.417 1.472-.51 2.761-1.25.138-.093.322-.047.46.046l4.694 2.825c.184.092.414.092.552 0l18.363-10.698c.183-.092.277-.277.277-.509V42.867c0-.232-.094-.417-.277-.51l-18.363-10.65c-.184-.093-.414-.093-.552 0l-18.362 10.65c-.184.093-.276.324-.276.51v21.347c0 .186.092.417.276.51l5.016 2.917c2.715 1.39 4.418-.232 4.418-1.852v-21.07c0-.278.23-.556.553-.556h2.347c.276 0 .552.232.552.556v21.07c0 3.658-1.979 5.788-5.431 5.788-1.058 0-1.886 0-4.234-1.157l-4.832-2.779a3.91 3.91 0 0 1-1.933-3.38V42.912c0-1.39.737-2.686 1.933-3.38l18.363-10.697c1.15-.649 2.715-.649 3.865 0l18.363 10.696a3.91 3.91 0 0 1 1.932 3.381V64.26c0 1.39-.736 2.686-1.932 3.381l-18.363 10.697c-.552.232-1.242.417-1.932.417"
          fill="#5FA04E"
        />
        <path
          d="M240.69 64.075c-8.055 0-9.712-3.705-9.712-6.854 0-.277.23-.555.552-.555h2.393c.277 0 .507.185.507.463.368 2.454 1.426 3.658 6.305 3.658 3.866 0 5.523-.88 5.523-2.963 0-1.204-.462-2.084-6.49-2.686-5.016-.51-8.146-1.621-8.146-5.65 0-3.75 3.13-5.974 8.376-5.974 5.892 0 8.791 2.038 9.159 6.484a.76.76 0 0 1-.137.416c-.094.093-.231.186-.371.186h-2.439a.54.54 0 0 1-.505-.417c-.553-2.547-1.98-3.38-5.753-3.38-4.234 0-4.74 1.481-4.74 2.593 0 1.342.598 1.76 6.305 2.5 5.66.741 8.33 1.806 8.33 5.788 0 4.076-3.36 6.391-9.157 6.391m26.51-22.413c0 1.945-1.612 3.566-3.546 3.566a3.556 3.556 0 0 1-3.543-3.566 3.556 3.556 0 0 1 3.543-3.565c1.888 0 3.546 1.574 3.546 3.565m-6.536 0c0 1.667 1.335 3.01 2.944 3.01 1.658 0 2.993-1.39 2.993-3.01 0-1.667-1.335-2.963-2.993-2.963a2.975 2.975 0 0 0-2.944 2.963m1.657-1.991h1.381c.46 0 1.381 0 1.381 1.065 0 .74-.462.88-.739.973.554.046.599.416.645.926.046.324.094.88.185 1.065h-.83c0-.186-.137-1.204-.137-1.25-.045-.232-.137-.325-.413-.325h-.691v1.62h-.782zm.736 1.76h.597c.508 0 .599-.37.599-.556 0-.556-.368-.556-.599-.556h-.642v1.112z"
          fill="#5FA04E"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M43.674 41.954c0-.834-.46-1.62-1.197-2.038L23.01 28.572c-.322-.185-.69-.278-1.058-.324h-.184c-.368 0-.736.139-1.059.324l-19.512 11.3A2.38 2.38 0 0 0 0 41.953l.046 30.378c0 .416.23.833.598 1.018.368.232.829.232 1.15 0l11.598-6.668a2.36 2.36 0 0 0 1.197-2.037V50.428c0-.833.46-1.62 1.196-2.037l4.924-2.871a2.2 2.2 0 0 1 1.197-.325c.414 0 .828.093 1.15.325l4.925 2.87a2.36 2.36 0 0 1 1.196 2.038v14.217c0 .833.46 1.62 1.197 2.037l11.505 6.668c.368.232.828.232 1.197 0 .368-.185.598-.602.598-1.018zM137.465.139c-.369-.185-.829-.185-1.151 0-.368.231-.598.602-.598 1.019v30.1a.89.89 0 0 1-.415.74.88.88 0 0 1-.828 0l-4.878-2.825a2.36 2.36 0 0 0-2.347 0L107.735 40.52a2.36 2.36 0 0 0-1.196 2.037V65.2c0 .834.46 1.621 1.196 2.038l19.513 11.345a2.36 2.36 0 0 0 2.347 0l19.513-11.345a2.36 2.36 0 0 0 1.196-2.038V8.752c0-.88-.46-1.667-1.196-2.084zm-1.795 57.606c0 .232-.092.417-.276.51l-6.674 3.89a.68.68 0 0 1-.598 0l-6.673-3.89c-.184-.093-.276-.325-.276-.51v-7.78c0-.231.092-.416.276-.509l6.673-3.89a.68.68 0 0 1 .598 0l6.674 3.89c.184.093.276.324.276.51zm66.728-7.965c.737-.417 1.151-1.204 1.151-2.038v-5.51c0-.834-.46-1.62-1.151-2.037l-19.375-11.3a2.36 2.36 0 0 0-2.347 0l-19.512 11.346a2.36 2.36 0 0 0-1.197 2.037v22.645c0 .833.46 1.62 1.197 2.037l19.374 11.114c.737.416 1.611.416 2.301 0l11.736-6.576c.368-.185.598-.602.598-1.019s-.23-.833-.598-1.018L174.97 58.115c-.368-.231-.598-.602-.598-1.018v-7.085c0-.417.23-.834.598-1.02l6.121-3.518a1.12 1.12 0 0 1 1.196 0l6.121 3.519c.368.231.598.602.598 1.019v5.557c0 .416.23.833.599 1.018.368.232.828.232 1.196 0z"
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M181.551 48.716a.42.42 0 0 1 .461 0l3.727 2.176c.138.092.23.231.23.417v4.352a.49.49 0 0 1-.23.417l-3.727 2.177a.42.42 0 0 1-.461 0l-3.727-2.177a.49.49 0 0 1-.23-.417V51.31c0-.185.092-.325.23-.417z"
          fill="#5FA04E"
        />
        <g transform="translate(53.428, 28.628)">
          {variant === 'pride' && (
            <g clip-path="url(#d)">
              <rect fill="#E40303" x="0" y="0" width="44" height="8.333" />
              <rect fill="#FF8C00" x="0" y="8.333" width="44" height="8.333" />
              <rect fill="#FFED00" x="0" y="16.666" width="44" height="8.333" />
              <rect fill="#008026" x="0" y="25" width="44" height="8.333" />
              <rect fill="#004DFF" x="0" y="33.333" width="44" height="8.333" />
              <rect fill="#750787" x="0" y="41.666" width="44" height="8.333" />
            </g>
          )}
          <g
            opacity={variant === 'pride' ? 0.5 : 1}
            style={
              variant === 'pride'
                ? {
                    mixBlendMode: 'luminosity',
                  }
                : {}
            }
          >
            <path
              fill="url(#b)"
              d="M22.873.417a2.36 2.36 0 0 0-2.348 0L1.151 11.669C.414 12.086 0 12.873 0 13.707v22.551c0 .834.46 1.621 1.15 2.038l19.375 11.253a2.36 2.36 0 0 0 2.348 0l19.374-11.253c.737-.417 1.15-1.204 1.15-2.038V13.707c0-.834-.46-1.62-1.15-2.038z"
            />
            <path
              fill="url(#c)"
              clipPath="url(#d)"
              filter={variant === 'pride' ? 'url(#f)' : undefined}
              d="m21.699-1.047 21.506 12.995L21.7 51.073.153 38.055z"
            />
            <path
              fill="url(#e)"
              clipPath="url(#d)"
              filter={variant === 'pride' ? 'url(#f)' : undefined}
              d="M21.699-1.047.153 11.948l21.546 39.125 21.506-13.018z"
            />
          </g>
        </g>
      </g>
      <defs>
        <linearGradient
          id="b"
          x1={30.33}
          y1={8.56}
          x2={14.9}
          y2={44.7}
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#3F8B3D" />
          <stop offset={0.64} stopColor="#3F873F" />
          <stop offset={0.93} stopColor="#3DA92E" />
          <stop offset={1} stopColor="#3DAE2B" />
        </linearGradient>
        <linearGradient
          id="c"
          x1={18.8}
          y1={26.8}
          x2={68}
          y2={0.4}
          gradientUnits="userSpaceOnUse"
        >
          <stop offset={0.14} stopColor="#3F873F" />
          <stop offset={0.4} stopColor="#52A044" />
          <stop offset={0.71} stopColor="#64B749" />
          <stop offset={0.91} stopColor="#6ABF4B" />
        </linearGradient>
        <linearGradient
          id="e"
          x1={0.25}
          y1={24.5}
          x2={44}
          y2={24.5}
          gradientUnits="userSpaceOnUse"
        >
          <stop offset={0.09} stopColor="#6ABF4B" />
          <stop offset={0.29} stopColor="#64B749" />
          <stop offset={0.6} stopColor="#52A044" />
          <stop offset={0.86} stopColor="#3F873F" />
        </linearGradient>
        <clipPath id="d">
          <path d="M22.873.417a2.36 2.36 0 0 0-2.348 0L1.151 11.669C.414 12.086 0 12.873 0 13.707v22.551c0 .834.46 1.621 1.15 2.038l19.375 11.253a2.36 2.36 0 0 0 2.348 0l19.374-11.253c.737-.417 1.15-1.204 1.15-2.038V13.707c0-.834-.46-1.62-1.15-2.038z" />
        </clipPath>
        {variant === 'pride' && (
          <filter id="f">
            <feDropShadow
              dx="0"
              dy="0"
              stdDeviation="2"
              flood-color="#000000"
              flood-opacity="0.5"
            />
          </filter>
        )}
      </defs>
    </svg>
  );
};

export default NodejsIcon;
